<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">
    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <el-container>
            <!-- 编辑标签弹层 -->
            <div class="add-form" style="margin: 30px 10px 10px 30px;">
                <el-form ref="from" :model="mimaData" :rules="rules"  label-width="150px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="旧密码" prop="lastpassword">
                                <el-input v-model="mimaData.lastpassword" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="新密码" prop="newpassword">
                                <el-input v-model="mimaData.newpassword" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="17">
                            <el-form-item label="验证码" prop="yzm">
                                <el-input v-model="mimaData.yzm" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-button type="primary" @click="getYZM()" style="margin-left:10px ;">获取验证码</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" style="margin-left: 100px">
                    <el-button type="primary" @click="TJ()">确认修改</el-button>
                </div>
            </div>
        </el-container>
    </el-container>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            formData: {},
            mimaData: {},
            rules: {//校验规则
                lastpassword: [{ required: true, message: '【必填】旧密码必填', trigger: 'blur' }],
                newpassword: [{ required: true, message: '【必填】新密码必填', trigger: 'blur' }],
                yzm: [{ required: true, message: '【必填】验证码必填', trigger: 'blur' }],
            }
        },
        created(){
            //通过学生学号来查询相关信息，以便该页面继续执行相关操作
            var stuId = sessionStorage.getItem("stuId");
            axios.get("/student/findByStuId?id="+stuId).then((res)=>{
                this.formData=res.data.data;
            })
        },
        methods: {
            //获取验证码
            getYZM(){
                axios.post("/email/sendEmail?email=" + this.formData.stuMail).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
            },
            //提交消息,进行验证
            TJ(){
                //赋值给mimaData学号
                this.mimaData.stuId = sessionStorage.getItem("stuId");
                axios.post("/student/stuChangePWD",this.mimaData).then((res)=>{
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })

            }

        }
    })
</script>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 700px;
    }
</style>
</html>
